<template>
  <div class="container">
    <el-dialog :model-value="showDialog" @close="close">
      <template #title
        ><div class="title">
          <slot name="title">
            <img src="@/assets/img/icon/common/common-136.svg" alt="" />

            个人信息修改
          </slot>
        </div>
      </template>
      <slot name="content"></slot>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'editDialogCp',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:showDialog'],
  setup(props, { emit }) {
    const close = () => {
      emit('update:showDialog', false)
    }

    return {
      value1: ref([]),
      close
    }
  }
})
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
}
:deep(.el-dialog__header) {
  padding: 0;
  background-color: #679aff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100%;
  font-size: 26px;
}
:deep(.el-select) {
  width: 100%;
}
.title {
  padding: 19px 25px;
  background-color: #679aff;
  display: flex;
  align-items: center;
  font-size: 26px;
  color: #fff;
  img {
    width: 30px;
    margin-right: 6px;
  }
}
.head_portrait {
  height: 166px;
  img {
    width: 100%;
  }
  .avatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
  .change-text {
    margin-top: 5px;
    color: #679aff;
    font-size: 14px;
  }
}
.footer-btn {
  width: 267px;
  height: 48px;
  margin: 0 auto;
}
</style>
